<template>
    <div class="w100p h100p relative" :id="id">
        <!--        表单填写时 -->
        <a-tree-select
            :getPopupContainer="getContainer"
            :disabled="disabled"
            v-model="values"
            :multiple="configInfo.multiple"
            :maxTagCount="configInfo.maxTagCount"
            show-search
            :treeNodeFilterProp="configInfo.treeNodeFilterProp"
            style="width: 100%;height: 100%"
            :dropdown-style="{
                    maxHeight: '100%',
                    minHeight: '200px',
                    overflow: 'auto',
                }"
            :tree-data="items"
            :placeholder="configInfo.placeholder"
            :replaceFields="configInfo.FieldsObj"
            @change="changeValue"
        >
        </a-tree-select>
    </div>
</template>

<script>
import global from "@/assets/js/global";

export default {
    name: "select_device",
    props: {
        config: {
            // 组件的配置项
            type: Object,
            default() {
                return {};
            },
        },
        source:{},
        disabled:{
            type:Boolean,
            default:false
        }
    },
    beforeMount() {
        this.getList();
    },
    mounted() {
        this.configInfo = { ...this.configInfo, ...this.config };
    },
    watch:{
        source:{
            deep:true,
            handler(value){
                this.updateSource(value)
            },
        }
    },
    data() {
        return {
            configInfo: {
                placeholder: "请选择设备",
                multiple: false, // 是否可以多选
                FieldsObj: {
                    title: "name",
                    value: "id",
                    key: "id",
                    children: "subRooms",
                },
                treeNodeFilterProp: "title", // 显示出来给用户看的字段名称
                isDisabledParent: true, // 是否不能选择父类
                maxTagCount: 9999, // 最多能显示多少个tag
            },
            values:[],
            id: global.getRandomId(),
            items: [],
        };
    },
    methods: {
        getList() {
            this.$axios
                .get(this.$url.selectEngineRoomDeviceByOrgIdV2, {
                    params: {
                        organizationId: this.$store.state.user.info
                            .currentUserDTO.organizationId,
                    },
                })
                .then((data) => {
                    this.items = data.data;
                    this.disabledArea(this.items)
                    this.updateSource(this.source);
                });
        },
        disabledArea(arr){
            //    禁用区域选择
            arr.map((item) => {
                if(item.engineroomAndDeviceEnum == 'ROOM'){
                    item.disabled = true;
                }
                if (item.subRooms && item.subRooms.length) {
                    this.disabledArea(item.subRooms);
                }
            });
        },
        updateSource(value){
            if(!value) {
                return
            }
            if(typeof value== 'string'){
                this.values = [value]
            }else{
                this.values = value
            }
        },
        getContainer() {
            // 指定父级容器,解决滚动条滚动时,选择框跟着移动的问题
            return document.getElementById(this.id);
        },
        changeValue(value, label, extra) {
            this.$emit("change", value,label);
        },
        disabledParent(arr) {
            //    设备类型只能选中末级,将所有父集的全部设置 selectable = false
            arr.map((item) => {
                if (item.subs && item.subs.length ) {
                    item.selectable = false;
                    this.disabledParent(item.subs);
                }
            });
        },
    },
};
</script>

<style scoped>
.set-box {
    padding: 16px;
    box-sizing: border-box;
}
</style>
